<template>
  <div class="myradio-container">
    <div class="myradio-header">
      <span
        >我订阅的电台<span>（{{ myRadio.length }}）</span></span
      >
    </div>
    <div class="myradio-split"></div>
    <div class="myradio-list">
      <div class="myradio-item" v-for="radio in myRadio" :key="radio.id">
        <div class="radio-img">
          <img v-lazy="radio.picUrl" alt="" />
        </div>
        <div class="radio-info">
          <p>{{ radio.name }}</p>
          <p>by {{ radio.dj.nickname }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "myRadio",
};
</script>

<script lang="ts" setup>
import { getMyRadioApi } from "@/api/myMusic/mySinger";
import { ref, onMounted } from "vue";

const myRadio = ref<any>([]);
const getMyRadio = async () => {
  const res = await getMyRadioApi();
  myRadio.value = res.djRadios;
};

onMounted(() => {
  getMyRadio();
});
</script>

<style scoped>
.myradio-container {
  width: 750px;
  border: 1px solid #d3d3d3;
}
.myradio-header {
  font-size: 24px;
  padding: 10px;
}
.myradio-split {
  width: 100%;
  height: 1px;
  background: #000;
  margin: 5px 0;
}
.myradio-item {
  display: flex;
  padding: 10px;
}
.myradio-item img {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.video-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
</style>
